<template>
  <div class="phoneVideo">
    <el-image class="video_image" :src="props.materialsInfo[0].videoUrl" alt="" fit="cover">
      <template #error>
        <el-image class="video_image" src="/static/file/mov.png" alt=""></el-image>
      </template>
    </el-image>
    <el-image class="video_play" src="/static/play.png" alt="" fit="cover"></el-image>
  </div>
</template>

<script setup lang='ts'>
import {reactive, ref, computed, watch, onMounted, defineProps} from "vue"
import {useRouter, useRoute} from "vue-router"
import MessageModel from './MessageModel.vue'

const props = defineProps(['materialsInfo'])

</script>
<style lang="scss" scoped>
.phoneVideo {
  position: relative;
  width: 88px;
  height: 76px;
  display: flex;
  align-items: center;
  .video_image {
    width: 100%;
    height: 76px;
  }
  .video_play {
    width: 15px;
    height: 15px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
